﻿import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
import Qt.labs.qmlmodels 1.0
import NewConRect 1.0

Rectangle{
    id:listviewsamplerect
    anchors.top: con_manage_text.bottom
    anchors.bottom: connectrect.bottom
    anchors.left: connectrect.left
    anchors.right: connectrect.right
    anchors.topMargin: 2
    color: "lightsteelblue"
    Rectangle{
        id:header
        anchors.topMargin: 5
        anchors.left: listviewsamplerect.left
        anchors.leftMargin: 5
        anchors.right: listviewsamplerect.right
        anchors.rightMargin: 5
        width: listviewsamplerect.width-10
        height: 30

        Row{
            spacing: 0

            Repeater{
                model: ["设备名","IP地址","时间","连接状态"]

                Rectangle{
                    width: header.width/4
                    height: header.height
                    color: "#666666"
                    border.width: 1
                    border.color: "#848484"
                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                    }
                }
            }
        }
    }



    ListView{
        id:listview
        width: parent.width
        anchors.top:header.bottom
        anchors.topMargin: 10
        anchors.left: listviewsamplerect.left
        anchors.leftMargin: 5
        anchors.right: listviewsamplerect.right
        anchors.rightMargin: 5
        anchors.bottom: listviewsamplerect.bottom
        spacing: 4
        clip: true
        //仅当内容太大而无法容纳时，才会显示滚动条。
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AsNeeded
        }
        displaced: Transition {
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
        }
        model: ListModel { id: devicemanager }
        delegate: Component {

            Row {
                Rectangle {
                    width: (listview.width)/4
                    height: 32
                    radius: 2
                    border.color: "#777"
                    color: hovered ? "#559EF2FA" : "#55556677"
                    property bool hovered: false

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.hovered = true;
                        onExited: parent.hovered = false;
                    }

                    Text {
                        anchors.centerIn: parent
                        text: qsTr(name)
                    }
                }
                Rectangle {
                    width: (listview.width)/4
                    height: 32
                    radius: 2
                    border.color: "#777"
                    color: hovered ? "#559EF2FA" : "#55556677"
                    property bool hovered: false

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.hovered = true;
                        onExited: parent.hovered = false;
                    }

                    Text {
                        anchors.centerIn: parent
                        text: qsTr(ipaddress)
                    }
                }
                Rectangle {
                    width: (listview.width)/4
                    height: 32
                    radius: 2
                    border.color: "#777"
                    color: hovered ? "#559EF2FA" : "#55556677"
                    property bool hovered: false

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.hovered = true;
                        onExited: parent.hovered = false;
                        onClicked: {
                            //devicemanager.clear();
                        }
                    }

                    Text {
                        anchors.centerIn: parent
                        text: qsTr(thetime)
                    }
                }
                Rectangle {
                    width: (listview.width)/4
                    height: 32
                    radius: 2
                    border.color: "#777"
                    color: hovered ? "#559EF2FA" : "#55556677"
                    property bool hovered: false

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.hovered = true;
                        onExited: parent.hovered = false;
                        onClicked: {
                            //devicemanager.clear();
                        }
                    }

                    Text {
                        anchors.centerIn: parent
                        text: qsTr(linkif)//linkif不能是state
                    }
                }

            }//Row

        }//Component
    }


    //连接成功时 发出信号的槽函数
   Connections{
       target: NewConRect
       function onConSuccessSig(str_ipadd,str_hostname){
              devicemanager.append({"name": str_hostname,"ipaddress": str_ipadd,"thetime":Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss"),"linkif": "连接成功"});
       }
   }
   Connections{
       target: NewConRect
       function onConFailSig(str_ipadd,str_hostname){
              devicemanager.append({"name": str_hostname,"ipaddress": str_ipadd,"thetime":Qt.formatDateTime(new Date(), "yyyy-MM-dd hh:mm:ss"),"linkif": "连接失败"});
       }
   }
}
